<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="UTF-8">
	<!--下面是自适应端口 -->
	<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
	<title>栅格系统</title>
	
	<link rel="stylesheet"  href="__ROOT__/static/css/bootstrap.min.css" />
	<style>
.a{
height:50px;
border:1px solid #ccc;
background-color:#eee;

}
	</style>
	
	</head>
<body >

<div class="container-fluid a">

div容器 是相对宽度的
class="container-fluid a" 是a种样式
<p><span style="color:red">注:</span>这是满屏</p>
</div>

<br/>
<div class="container">
	<div class="row">
		<div class="col-md-1 a">1</div>
		<div class="col-md-1 a">1</div>
		<div class="col-md-1 a">3</div>
		<div class="col-md-1 a">1</div>
		<div class="col-md-1 a">5</div>
		<div class="col-md-1 a">1</div>
		<div class="col-md-1 a">7</div>
		<div class="col-md-1 a">1</div>
		<div class="col-md-1 a">9</div>
		<div class="col-md-1 a">1</div>
		<div class="col-md-1 a">11</div>
		<div class="col-md-1 a">12</div>
	</div>
	<div class="row">
		<div class="col-md-9 a">9</div>
		<div class="col-md-3 a">3</div>
	</div>
	<div class="row">
		<div class="col-md-4 a">4</div>
		<div class="col-md-4 a">4</div>
		<div class="col-md-4 a">4</div>
	</div>
</div> 

<!-- <div class="container">
	<div class="row">
		<div class="col-lg-3 col-md-4 col-sm-6 col-xs-6 a">a</div>
		<div class="col-lg-3 col-md-4 col-sm-6 col-xs-6 a">a</div>
		<div class="col-lg-3 col-md-4 col-sm-6 col-xs-6 a">a</div>
		<div class="col-lg-3 col-md-4 col-sm-6 col-xs-6 a">a</div>
		<div class="col-lg-3 col-md-4 col-sm-6 col-xs-6 a">a</div>
		<div class="col-lg-3 col-md-4 col-sm-6 col-xs-6 a">a</div>
		<div class="col-lg-3 col-md-4 col-sm-6 col-xs-6 a">a</div>
		<div class="col-lg-3 col-md-4 col-sm-6 col-xs-6 a">a</div>
		<div class="col-lg-3 col-md-4 col-sm-6 col-xs-6 a">a</div>
		<div class="col-lg-3 col-md-4 col-sm-6 col-xs-6 a">a</div>
		<div class="col-lg-3 col-md-4 col-sm-6 col-xs-6 a">a</div>
		<div class="col-lg-3 col-md-4 col-sm-6 col-xs-6 a">a</div>
	</div>
</div> -->

<div class="container">
	<div class="row">
		<div class="col-md-8 a">8</div>
		<div class="col-md-3 col-md-offset-1 a">3</div>
	</div>
	<div class="row">
		<div class="col-md-9 a" style="padding:0">
			<div class="col-md-4 a">4</div>
			<div class="col-md-4 a">4</div>
			<div class="col-md-4 a">4</div>
		</div>
		<div class="col-md-3 a">3</div>
	</div>
	<div class="row">
		<div class="col-md-9 col-md-push-3 a">9</div>
		<div class="col-md-3 col-md-pull-9 a">3</div>
	</div>
</div>

 <hr style="width:80%;height:3px;border:none;border-top:3px double red;" />
<p style="text-align:center">div 浮动</p>
<div class="pull-left a">左边</div> 
<div class="pull-right b">右边</div>

<pre>

	&lt;div class="container">
	&lt;div class="row">
		&lt;div class="col-md-8 a">8&lt;/div>
		&lt;div class="col-md-3 col-md-offset-1 a">3&lt;/div>
	&lt;/div>
	&lt;div class="row">
		&lt;div class="col-md-9 a" style="padding:0">
			&lt;div class="col-lg-3 col-md-4 col-sm-6 col-xs-6 a">4&lt;/div>
			&lt;div class="col-md-4 a">4&lt;/div>
			&lt;div class="col-md-4 a">4&lt;/div>
		&lt;/div>
		&lt;div class="col-md-3 a">3&lt;/div>
	&lt;/div>
	&lt;div class="row">
		&lt;div class="col-md-9 col-md-push-3 a">9&lt;/div>
		&lt;div class="col-md-3 col-md-pull-9 a">3&lt;/div>
	&lt;/div>
&lt;/div>

 &lt;hr style="width:80%;height:3px;border:none;border-top:3px double red;" />
&lt;p style="text-align:center">div 浮动&lt;/p>
&lt;div class="pull-left a">左边&lt;/div> 
&lt;div class="pull-right b">右边&lt;/div>






</pre>






<script src="__ROOT__/static/js/jquery.min.js"></script>
<script src="__ROOT__/static/js/bootstrap.min.js"></script>
</body>
</html>